<template>
    <el-menu class="navbar" mode="horizontal">
        <div style="float:left">
            <div class="sidebar-logo">
                <img src="../assets/minilogo.png">
                乐酷刷题系统
            </div>
            <div class="sidebar-logo-mini">
                <img src="../assets/minilogo.png">
            </div>
        </div>
        <hamburger class="hamburger-container" :toggle-click="toggleSideBar" :is-active="sidebar.open上ed" />

        <breadcrumb class="breadcrumb-container" />

        <div class="right-menu">
            <!-- 开启圆形导航栏 -->
            <div class="item circle">
                <el-switch v-model="value" active-text="圆形导航" @change="switchCircle" />
            </div>

            <!-- 站内搜索 -->
            <div class="item">
                <el-tooltip effect="dark" :content="$t('navbar.search')" placement="bottom">
                    <el-button icon="el-icon-search" type="text" class="btnSearch" @click="handleBtnSearch" />
                </el-tooltip>
                <transition name="el-fade-in-linear">
                    <el-autocomplete v-show="showSearchInput" ref="searchInput" v-model="searchVal"
                        :fetch-suggestions="querySearchAsync" placeholder="站内搜索" :trigger-on-focus="true"
                        @select="handleSelect" @blur="showSearchInput = false" />
                </transition>
            </div>
            <!-- 全屏 -->
            <el-tooltip effect="dark" :content="$t('navbar.screenfull')" placement="bottom">
                <screenfull class="item" />
            </el-tooltip>
            <!-- 多语言 -->
            <!-- <lang-select class="item"></lang-select> -->
            <!-- 换肤 -->
            <el-tooltip effect="dark" :content="$t('navbar.theme')" placement="bottom">
                <theme-picker class="item" />
            </el-tooltip>
            <!-- 用户信息 -->
            <el-dropdown class="item">
                <span class="el-dropdown-link">
                    <!-- <img class="avatar" src="../assets/bigUserHeader.png"> -->
                    {{ name }}
                    <i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                    <router-link to="/">
                        <el-dropdown-item>{{ $t('navbar.dashboard') }}</el-dropdown-item>
                    </router-link>
                    <el-dropdown-item divided>
                        <span style="display:block;" @click="logout">{{ $t('navbar.logOut') }}</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </el-menu>
</template>

<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import ThemePicker from '@/components/ThemePicker'
import { search } from '@/api/base/menus'

export default {
    name: 'LayoutNavBar',
    components: {
        Breadcrumb,
        Hamburger,
        Screenfull,
        ThemePicker
    },
    props: {
        isCircleShow: {
            type: [Boolean, String],
            default: null
        }
    },
    computed: {
        ...mapGetters(['sidebar', 'name', 'avatar'])
    },
    data() {
        return {
            value: true,
            searchVal: '',
            timeout: null,
            showSearchInput: false,
            restaurants: []
        }
    },
    mounted() {
        this.restaurants = search()
    },
    methods: {
        // 控制圆形导航开关事件
        switchCircle() {
            this.$emit('update:isCircleShow', this.value)
        },
        toggleSideBar() {
            this.$store.dispatch('toggleSideBar')
        },
        logout() {
            this.$store.dispatch('LogOut').then(() => {
                location.reload() // In order to re-instantiate the vue-router object to avoid bugs
            })
        },
        handleBtnSearch() {
            this.showSearchInput = !this.showSearchInput
            this.$nextTick(() => {
                this.$refs.searchInput.focus()
            })
        },
        querySearchAsync(queryString, cb) {
            var restaurants = this.restaurants
            var results = queryString
                ? restaurants.filter(this.createStateFilter(queryString))
                : restaurants

            clearTimeout(this.timeout)
            this.timeout = setTimeout(() => {
                cb(results)
            }, 1000 * Math.random())
        },
        createStateFilter(queryString) {
            return state => {
                return (
                    state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
                )
            }
        },
        handleSelect(item) {
            this.searchVal = ''
            this.showSearchInput = false
            console.log(item)
            this.$message({
                message: `选取了 ${item.value}`,
                type: 'success'
            })
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.navbar .item .el-input__inner {
    border: 0px;
    border-bottom: 1px solid #dcdfe6;
    border-radius: 0px;
}

.Homelogo {
    background: #4facfe;
    height: 56px;
    padding: 15px 0 0;
    text-align: center;

    span {
        background: url(../assets/logo.png) no-repeat 50%;
        display: block;
        height: 28px;
    }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.circle {
    position: absolute;
    left: 80px;
    top: 50px;
}

.navbar {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 70px;
    line-height: 70px;
    border-radius: 0px !important;
    // background: linear-gradient(to right,   #84fab0 0%, #8fd3f4 100%);
    background-image: url(../../assets/R-C.gif);
    background-repeat: no-repeat;
    background-size: cover;

    .hamburger-container {
        line-height: 70px;
        height: 70px;
        float: left;
        padding: 0 10px;
    }

    .breadcrumb-container {
        float: left;
    }

    .errLog-container {
        display: inline-block;
        vertical-align: top;
    }

    .right-menu {
        // float: right;
        position: absolute;
        right: 0px;
        height: 50px;

        .item {
            display: inline-block;
            color: #fff;
            margin-right: 10px;

            i {
                font-size: 18px;
            }

            .btnSearch {
                margin-right: 5px;
                font-size: 18px;
                color: #fff;
            }

            .avatar {
                width: 22px;
                vertical-align: -5px;
            }
        }
    }
}
</style>
